<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="轮播名称">
      <template #default="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column label="广告链接">
      <template #default="scope">
        <a href="https://cn.vuejs.org/guide/quick-start.html" target="_blank">点击预览</a>
      </template>
    </el-table-column>
    <el-table-column label="图片">
      <template #default="scope">
        <img :src="scope.row.url" alt="" srcset="" style="height: 50px" />
      </template>
    </el-table-column>
    <el-table-column label="是否显示">
      <template #default="scope">
        <el-switch v-model="scope.row.show" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { bannerDel } from '../../api/product'
import { ElMessageBox } from "element-plus";

export default {
  computed: {
    tableData() {
      return this.$store.state.banner.tableData
    }
  },
  created() {
    this.$store.dispatch('banner/initBannerAct')
  },
  methods: {
    handleEdit(index, row) {
      let param = encodeURI(JSON.stringify(row))
      // let par = encodeURI(param)
      console.log(index, row)
      this.$router.push({
        path: "/banner/edit",
        query: { zz: param }
      })
    },
    handleDelete(index, row) {
      ElMessageBox.confirm("删除后数据无法找回", "确定要删除吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        bannerDel(row.objectId).then((res) => {
          this.tableData.splice(index, 1)
        })
      })
    }
  }
}


</script>
